<template>
  <div class="my-container">
    <!-- 未登录 -->
    <div v-if="!userState" class="header not-login">
      <div class="login-btn" @click="this.$router.push('/login')">
        <img class="imgSize" src="../../assets/baby.png" alt="">
        <span class="text">Register / Login</span>
      </div>
    </div>

    <!-- 登陆后 -->
    <div v-else class="bgu user-info">
    <div class="base-info">
      <div class="left">
        <van-image
            class="avatar"
            fit="cover"
            round
            :src="`${url}`+userInfo.photo"
        >
        </van-image>
        <span class="name">{{userInfo.userName}}</span>
      </div>
      <div class="right">
        <van-button round type="primary" size="mini">编辑资料</van-button>
      </div>
    </div>
    <div class="data-stats">
      <div class="data-item"><span class="count">{{userInfo.art_count}}</span><span class="text">Headline</span></div>
      <div class="data-item"><span class="count">{{userInfo.follow_count}}</span><span class="text">Attention</span></div>
      <div class="data-item"><span class="count">{{userInfo.fans_count}}</span><span class="text">Fans</span></div>
      <div class="data-item"><span class="count">{{userInfo.like_count}}</span><span class="text">Praised</span></div>
    </div>
  </div>

  <!-- 导航 -->
  <van-grid :column-num="2" clickable>
    <van-grid-item :column-num="2" icon="star-o" text="Collection"/>
    <van-grid-item icon="clock-o" text="History"/>
  </van-grid>

  <!--  消息通知与退出登录-->
  <van-cell title="message notification" is-link/>
  <van-cell title="What button?" is-link />
  <van-cell title="Logout" class="logout-cell" v-if="userState" @click="onLogout"/>
  </div>
</template>
<script>
import {useStore} from 'vuex';
import {computed,onMounted,reactive,toRefs} from 'vue';
import {Dialog} from 'vant';
import {getUserInfo} from '../../api/user'

function useLogout(store){
  const onLogout = () => {
    Dialog.confirm({
      title: 'Are you sure exit?',
      message:
          '如果解决方法是丑陋的，那就肯定还有更好的解决方法，只是还没有发现而已。',
    })
        .then(() => {
          // on confirm
          console.log("confirm execution")
          store.commit("setUser",null)
        })
        .catch(() => {
          // on cancel
          console.log("cancel execution")
        });
  };
  return {
    onLogout,
  };
}

function useLoadUserInfo(){
  const state = reactive({
    userInfo:{
      userName:'',
      art_count:0,
      follow_count: 0,
      fans_count: 0,
      like_count: 0,
      photo: "",
    }
  });
  const store = useStore();
  const userState = computed(() => store.state.user);
  const url = import.meta.env.VITE_APP_URL
  const loadUserInfo = () => {
    if(userState.value !== null){
      getUserInfo(userState.value.data.id).then((res) => {
        state.userInfo = res.data;
      });
    }
  }
  onMounted(() => {
    loadUserInfo();
  });
  return {
    store,
    userState,
    state,
    url,
  }
}


export default {
  setup(){
    const {store,userState,state,url} = useLoadUserInfo();
    return {
      ...toRefs(state),
      userState,
      ...useLogout(store),
      url,
    }
  }
};
</script>

<style>

.my-container .header{
  height: 261px;
  background: url(../../assets/baby1.png);
  background-size: cover;
}
.bgu{
  height: 261px;
  background: url("../../assets/orange.png");
}

.my-container .not-login {
  display: flex;
  justify-content: center;
  align-items: center;
}

.my-container .not-login .login-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.imgSize {
  height: 132px;
  width: 132px;
  margin-bottom: 15px;
}

.text {
  font-size: 18px;
  color: black;
}

.user-info .base-info {
  height: 171px;
  padding: 70px 32px 23px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.user-info .left {
  display: flex;
  align-items: center;
}

.user-info .left .avatar {
  width: 132px;
  height: 132px;
  margin-right: 13px;
  border: 1px solid #fff;
}

.user-info .left .name {
  font-size: 16px;
  color: black;
}

.user-info .data-stats {
  display: flex;
}

.user-info .data-stats .data-item {
  height: 130px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
}
.user-info .data-stats .count{
  font-size: 18px;
}
.user-info .data-stats .text {
  font-size: 18px;
}
.van-grid-item_icon {
  color:#eb5253
}
.logout-cell {
  text-align: center;
  color: #d86262;
  height: 120px;
  margin-top: 9px;
}
</style>